<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>360°全景图预览体验</title>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    body{margin:0;overflow:hidden;font-family:'Segoe UI',sans-serif;background:#121212;color:white;}
    #canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;}
    #ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;}
    #title{position:absolute;top:25px;left:50%;transform:translateX(-50%);font-size:24px;font-weight:600;color:white;}
    #toolbar{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);display:flex;gap:15px;pointer-events:auto;
             background:rgba(0,0,0,0.7);padding:12px 20px;border-radius:50px;}
    .tool-btn{background:rgba(255,255,255,0.1);border:none;width:50px;height:50px;border-radius:50%;color:white;cursor:pointer;
              display:flex;align-items:center;justify-content:center;}
    .notification{position:fixed;bottom:160px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:white;
                  padding:12px 24px;border-radius:30px;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:4;}
    .notification.show{opacity:1;}
    #loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a0a;display:flex;flex-direction:column;
                    justify-content:center;align-items:center;z-index:10;}
    .loader{width:60px;height:60px;border:4px solid rgba(255,255,255,0.1);border-radius:50%;border-top:4px solid #6eb6ff;
            animation:spin 1.2s linear infinite;margin-bottom:20px;}
    @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
    /* 缩略图条 */
    #thumbnail-bar{
      position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
      display:flex;gap:10px;pointer-events:auto;z-index:5;
      background:rgba(0,0,0,0.6);padding:10px 15px;border-radius:12px;overflow-x:auto;max-width:90%;
    }
    #thumbnail-bar img{
      width:80px;height:50px;object-fit:cover;cursor:pointer;border:2px solid transparent;border-radius:6px;
      transition:transform .2s,border-color .2s;
    }
    #thumbnail-bar img:hover{transform:scale(1.05);}
    #thumbnail-bar img.active{border-color:#6eb6ff;}
  </style>
</head>
<body>
  <div id="loading-screen">
    <div class="loader"></div>
    <p>加载全景图中...</p>
  </div>

  <div id="canvas-container"></div>

  <div id="ui-overlay">
    <div id="title">360°全景体验</div>
    <div id="toolbar">
      <button class="tool-btn" id="reset-view" title="重置视图">↺</button>
      <button class="tool-btn" id="toggle-rotation" title="自动旋转">⟳</button>
      <button class="tool-btn" id="zoom-in" title="放大">+</button>
      <button class="tool-btn" id="zoom-out" title="缩小">-</button>
    </div>
    <div id="thumbnail-bar"></div>
  </div>

  <div class="notification" id="notification"></div>

  <script>
    let scene,camera,renderer,controls;
    let autoRotate=false,canvasElement,sphereMaterial;
    const panoramas=["p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg","p6.jpg","p7.jpg","p8.jpg"];
    let currentIndex=0;

    function showNotification(text){
      const n=document.getElementById('notification');
      n.textContent=text;n.classList.add('show');
      setTimeout(()=>n.classList.remove('show'),2000);
    }

    function loadPanorama(index){
      const textureLoader=new THREE.TextureLoader();
      const tex=textureLoader.load(panoramas[index],
        ()=>{document.getElementById('loading-screen').style.display='none';showNotification("切换到全景 "+(index+1));});
      sphereMaterial.map=tex;sphereMaterial.needsUpdate=true;
      updateThumbnails();
    }

    function init(){
      scene=new THREE.Scene();
      camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
      camera.position.set(0,0,0.1);
      renderer=new THREE.WebGLRenderer({antialias:true,alpha:true});
      renderer.setSize(window.innerWidth,window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      document.getElementById('canvas-container').appendChild(renderer.domElement);
      canvasElement=renderer.domElement;
      const textureLoader=new THREE.TextureLoader();
      const tex=textureLoader.load(panoramas[currentIndex],()=>{document.getElementById('loading-screen').style.display='none';});
      const sphereGeometry=new THREE.SphereGeometry(500,60,40);
      sphereMaterial=new THREE.MeshBasicMaterial({map:tex,side:THREE.BackSide});
      scene.add(new THREE.Mesh(sphereGeometry,sphereMaterial));
      controls=new THREE.OrbitControls(camera,canvasElement);
      controls.enableZoom=true;controls.enableRotate=true;controls.enablePan=false;
      controls.dampingFactor=0.05;controls.rotateSpeed=0.5;controls.zoomSpeed=0.7;
      controls.listenToKeyEvents(window);
      window.addEventListener('resize',onResize);
      setupUI();createThumbnails();updateThumbnails();
      animate();
    }

    function onResize(){camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth,window.innerHeight);}

    function toggleAutoRotation(){
      autoRotate=!autoRotate;controls.autoRotate=autoRotate;controls.autoRotateSpeed=1.0;
      showNotification(autoRotate?"自动旋转开启":"自动旋转关闭");
    }

    function setupUI(){
      document.getElementById('reset-view').addEventListener('click',()=>{controls.reset();showNotification("视角已重置");});
      document.getElementById('toggle-rotation').addEventListener('click',toggleAutoRotation);
      document.getElementById('zoom-in').addEventListener('click',()=>controls.dollyOut(0.5));
      document.getElementById('zoom-out').addEventListener('click',()=>controls.dollyIn(0.5));
      window.addEventListener('keydown',(e)=>{if(e.key==='Escape'){controls.reset();showNotification("视角已重置");}
                                             if(e.key===' '){toggleAutoRotation();}});
    }

    function createThumbnails(){
      const bar=document.getElementById('thumbnail-bar');bar.innerHTML="";
      panoramas.forEach((src,i)=>{
        const img=document.createElement('img');img.src=src;
        img.addEventListener('click',()=>{currentIndex=i;loadPanorama(currentIndex);});
        bar.appendChild(img);
      });
    }

    function updateThumbnails(){
      const imgs=document.querySelectorAll('#thumbnail-bar img');
      imgs.forEach((img,i)=>img.classList.toggle('active',i===currentIndex));
    }

    function animate(){requestAnimationFrame(animate);controls.update();renderer.render(scene,camera);}
    window.addEventListener('load',init);
  </script>
</body>
</html>
